<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 用户的登录界面 -->
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>JCP科技</title>

		<link rel="stylesheet" type="text/css" href="css/logincss/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/logincss/default.css">
		<script src='js/loginjs/prefixfree.min.js'></script>
		<link rel="stylesheet" type="text/css" href="css/logincss/styles.css">

		<link rel="stylesheet" type="text/css" href="css/logincss/dialog.css" />
		<link rel="stylesheet" type="text/css" href="css/logincss/dialog-wilma.css" />

	
		<script type="text/javascript" src="js/loginjs/modernizr.custom.js"></script>
		<script type="text/javascript" src="js/loginjs/classie.js"></script>
		<script type="text/javascript" src="js/loginjs/dialogFx.js"></script>

	</head>

	<body>

		<div id="logo">
			<h1 class="hogo"><i> JCP 科技有限公司</i></h1>
		</div>
		<section class="stark-login">
			<form action="loginservlet" method="post">
				<div id="fade-box">
					<input type="text"  id="用户名" name="account" vplaceholder="用户名/手机号/邮箱" required>
					<input type="password" placeholder="密码" name="pwd" required>
					<input type="submit" style="display:inline-block;width:196px;float:left;margin-left:47px;" value="密码登录">
					<input type="button" style="display:inline-block;width:196px;float:left;value:登录;margin-left:8px;" value="面部识别" data-dialog="somedialog">

					<!--   <button width="50%">登录</button>  <button width="50%">刷脸</button>  -->
					<!-- display:inline -->
			</form>
			</div>
			<!-- 弹窗 -->
			<div id="somedialog" class="dialog" style="z-index: 999;">
				<div class="dialog__overlay"></div>
				<div class="dialog__content"">
					<div class="morph-shape">
						<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 460 388" preserveAspectRatio="none" style="background: linear-gradient(#004746, #111111);">
							<rect x="3" y="3" fill="none" width="456px" height="383px" color="red" />
						</svg>
					</div>
					<!-- 弹出层的内容 -->
					<div class="dialog-inner"  >
						
						<div>
						<div id="media" >
							<h1 style="height:20px;margin:0px;padding:0px;color:#00fffd"><strong>JCP</strong>人脸识别</h1>
							<video id="video" width="300px" height="196px" autoplay ></video>
							<br />
							<canvas id="canvas" width="0" height="0"></canvas>
							<!-- 摄像头画面的js -->
							<script src="js/loginjs/video.js"></script>
						</div>
						
						<button class="action" data-dialog-close>刷脸登录</button>
						</div>
					</div>
				</div>
			</div>

			<div class="hexagons">
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<br>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<br>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>

				<br>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<br>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
				<span>&#x2B22;</span>
			</div>
		</section>

		<div id="circle1">
			<div id="inner-cirlce1">
				<h2> </h2>
			</div>
		</div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

		<script type="text/javascript">
			(function() {

				var dlgtrigger = document.querySelector('[data-dialog]'),
					somedialog = document.getElementById(dlgtrigger.getAttribute('data-dialog')),
					dlg = new DialogFx(somedialog);

				dlgtrigger.addEventListener('click', dlg.toggle.bind(dlg));

			})();
		</script>
	</body>

</html>